import React, {PureComponent, Fragment} from 'react';
import {connect} from 'dva';
import moment from 'moment';
import {Link} from 'dva/router';
import BusinessUnPayOrderListModal from './BusinessUnPayOrderList';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Table,
} from 'antd';
import DescriptionList from 'components/DescriptionList';
const {RangePicker} = DatePicker;
import StandardTable from 'components/OrderTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import {status, statusMap} from './orderStatus';
import styles from './OrderList.less';
import {stringify} from 'qs';
import {DATA_HOST,} from '../../utils/setting';
import G from '../../utils/g';

const {Description} = DescriptionList;
const FormItem = Form.Item;
const {Option} = Select;
// const statusMap = ['default', 'processing', 'success', 'error'];
// const status = ['退款成功', '退款退货成功', '退款申请中', '同意退款等待退货', '退款/退货申请中'];
// const columns = [
//   {
//     title: '商家',
//     dataIndex: 'goods_nickname',
//     key: 'goods_nickname'
//   },
//   {
//     title: '商品',
//     dataIndex: 'name',
//     key: 'name'
//   },
//   {
//     title: '型号',
//     dataIndex: 'sku',
//     key: 'sku',
//     render(text, record) {
//       let result = '';
//       const sku = JSON.parse(record.sku);
//       for (let key in sku) {
//         result = record.sku[key];
//       }
//       return result;
//     },
//   },
//   {
//     title: '单价',
//     dataIndex: 'price',
//     key: 'price'
//   },
//   {
//     title: '数量',
//     dataIndex: 'total_count',
//     key: 'total_count'
//   },
//   {
//     title: '利润',
//     dataIndex: 'profit_subtotal',
//     key: 'profit_subtotal'
//   },
//   {
//     title: '利润率',
//     dataIndex: 'profit_margin',
//     key: 'profit_margin'
//   },
//   {
//     title: '销售额',
//     dataIndex: 'sale_total',
//     key: 'sale_total'
//   },
//   {
//     title: '结算价',
//     dataIndex: 'settlement_price',
//     key: 'settlement_price'
//   },
//   {
//     title: '结算小计',
//     dataIndex: 'settlement_total',
//     key: 'settlement_total'
//   },
// ];

const columns = [
  {
    title: '订单号',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 80,
    render(text, record){
      let result = text.toString();
      return <Link to={`order-detail?id=${record.orderId}`}>{result.substr(result.length - 4)}</Link>; //取后四位显示
    }
  },
  {
    title: '商品',
    width: 300,
    dataIndex: 'name',
    render(text, record){
      let result = '';
      const sku = JSON.parse(record.sku);
      for (let key in sku) {
        result = record.sku[key];
      }
      return (<div>
        <img className={styles.goodsPic} src={`${record.img}?imageView2/1/w/50`}  width={50} />
        <p className={styles.goodsName}>
          {record.name} × {record.count}<br/>
          <span className={styles.goodsColor}>{
            result
          }</span>
        </p>
      </div>)
    }
  },
  {
    title: '买家信息',
    align: 'right',
    render: (val, record)=> {
      return (<div>
        {record.addressee} / {record.phone}
      </div>);
    }
  },
  {
    title: '下单时间',
    dataIndex: 'createTime',
    sorter: true,
    render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
  },
  {
    title: '商家',
    dataIndex: 'goods_nickname',
    key: 'goods_nickname'
  },
  {
    title: '单价',
    dataIndex: 'unit_price',
  },
  {
    title: '支付金额',
    dataIndex: 'price',
    key: 'price'
  },
  {
    title: '结算价',
    dataIndex: 'settlement_price',
    key: 'settlement_price'
  },
  {
    title: '结算小计',
    dataIndex: 'settlement_total',
    key: 'settlement_total',
    total:true,
  },
];

@connect(({businessPay, loading}) => ({
  businessPay,
  loading: loading.models.businessPay,
}))
@Form.create()
export default class TableList extends PureComponent {
  state = {
    modalVisible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
  };

  componentDidMount() {
    const {dispatch,
      location
    } = this.props;
    const id = G.getUrlValue('id', location.search);

    // 获取批次号详情信息
    dispatch({
      type: 'businessPay/fetchPayed',
      payload: {
        settlement_batch : id
      }
    });

    // 获取批次号订单列表
    dispatch({
      type: 'businessPay/fetchBusinessOrderList',
      payload: {
        settlement_batch : id
      }
    });
  }

  handleExportOrder = (id)=> { //导出查询订单
    const href = `${DATA_HOST}/dashboard/excel/settlement-order-list/?settlement_batch=${id}`;
    console.log('href', href);
    window.open(href);
  };

  render() {
    const {businessPay: {businessOrderList : {
      order_list = [],
      refund_order_list = [],
    }, payedBusinessList: {list}}, loading} = this.props;

    let payedDetail = {};
    if(list.length > 0){
      payedDetail = list[0];
    }
    const tableList = [...order_list, ...refund_order_list];  // 合并正常订单和维权订单

    const description = <DescriptionList className={styles.headerList} size="small" col="3">
      <Description term="商家">{payedDetail.goods_nickname}</Description>
      <Description term="金额">{payedDetail.price}</Description>
      <Description term="结算金额">{payedDetail.settlement_price}</Description>
      <Description
        term="状态">{payedDetail.settlement_status === 1 ? '成功' : '待确认'}</Description>
      <Description term="创建时间">{payedDetail.createTime}</Description>
      <Description term="利润">
        {payedDetail.profit_subtotal}
      </Description>
      <Description term="利润率">
        {payedDetail.profit_margin}
      </Description>
      <Description term="订单数量">{payedDetail.count}</Description>
    </DescriptionList>

    return (
      <PageHeaderLayout
        title={`结算批次号：${payedDetail.settlement_batch}`}
        logo={
          <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png"/>
        }
        content={description}
        action={
          <Fragment>
            <Button type="primary" onClick={()=>{this.handleExportOrder(payedDetail.settlement_batch)}}>导出报表</Button>
          </Fragment>
        }
      >
        <Card>
          <h3>已结算订单列表</h3>
          <Table rowKey={'orderId'} dataSource={tableList} columns={columns} pagination={false} loading={loading}/>
        </Card>
      </PageHeaderLayout>

    );
  }
}
